﻿@using Newtonsoft.Json
@using WebSite.Models
@{
    ViewBag.Title = "主机列表";
    var userJson = Session["AccountModel"].ToString();
    var userInfo = JsonConvert.DeserializeObject<Account>(userJson) ?? new Account();
}

@section Styles {
    <link href="~/Content/css/app.css" rel="stylesheet"/>
}

<el-container>
    <el-header>
        <el-row :gutter="20" type="flex" justify="right">
            <el-col :span="6">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item>
                        <a href="/">首页</a>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item>
                        <a href="/Home/Index">网站信息管理</a>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item>主机列表</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
            <el-col :span="8" :offset="10">
                <div style="float: right; margin-left: 15px;">
                    <el-dropdown @@command="handleCommand">
                        <el-button type="text">
                            @(userInfo.Name)
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item disabled>职位岗位：@(userInfo.Title)</el-dropdown-item>
                            <el-dropdown-item disabled>联系手机：@(userInfo.Mobile)</el-dropdown-item>
                            <el-dropdown-item disabled>入职时间：@(userInfo.HiredDate)</el-dropdown-item>
                            <el-dropdown-item disabled>最后登陆：@(userInfo.LastLoginTime)</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-edit" command="pwd" divided>修改密码</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-link" command="out">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div style="float: right;">
                    <el-avatar v-if="false" src="@(userInfo.Avatar)"></el-avatar>
                    <el-avatar v-else icon="el-icon-user-solid"></el-avatar>
                </div>
            </el-col>
        </el-row>
    </el-header>

    <el-main>
        <el-card class="box-card" style="margin-bottom: 5px;" shadow="never">
            <el-form :inline="true">
                <el-form-item label="网站名称" style="margin-bottom: 0;">
                    <el-input v-model="search.name" placeholder="请输入网站名称（支持模糊查询）" style="width: 240px;"></el-input>
                </el-form-item>
                <el-form-item style="margin-bottom: 0;">
                    <el-button type="primary" @@click="getTableData">查询</el-button>
                </el-form-item>
                <el-form-item style="margin-bottom: 0;">
                    <el-button type="success" @@click="handleAdd">新增</el-button>
                </el-form-item>
                <div style="float: right">
                    <el-button type="info"><a class="a_1" href="/api/ExportExcel">导出</a></el-button>
                </div>
            </el-form>
        </el-card>

        <el-table :data="tableData" border highlight-current-row size="small" v-loading="loading.table">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" class="my-table-expand">
                        <el-descriptions :column="4" border>
                            <el-descriptions-item>
                                <template slot="label">
                                    测试域名
                                </template>
                                <span>{{ props.row.TestDomain }}</span>
                            </el-descriptions-item>

                            <el-descriptions-item>
                                <template slot="label">
                                    域名平台
                                </template>
                                <span>{{ props.row.DomainTypeStr }}</span>
                            </el-descriptions-item>

                            <el-descriptions-item>
                                <template slot="label">
                                    主机供应商
                                </template>
                                <span>{{ props.row.SupplierStr }}</span>
                            </el-descriptions-item>

                            <el-descriptions-item>
                                <template slot="label">
                                    主机类型
                                </template>
                                <span>{{ props.row.DomainTypeStr }}</span>
                            </el-descriptions-item>

                            <el-descriptions-item>
                                <template slot="label">
                                    数据库类型
                                </template>
                                <span>{{ props.row.DataBaseTypeStr }}</span>
                            </el-descriptions-item>

                            <el-descriptions-item>
                                <template slot="label">
                                    签约商务
                                </template>
                                <span>{{ props.row.SignUser }}</span>
                            </el-descriptions-item>

                            <el-descriptions-item>
                                <template slot="label">
                                    签约时间
                                </template>
                                <span>{{ dateFormat2(props.row.SignTime) }}</span>
                            </el-descriptions-item>

                            <el-descriptions-item>
                                <template slot="label">
                                    签约年限
                                </template>
                                <span>{{ props.row.SignYear }}</span>
                            </el-descriptions-item>

                            <el-descriptions-item span="4">
                                <template slot="label">
                                    备注
                                </template>
                                <span>{{ props.row.Remark }}</span>
                            </el-descriptions-item>

                            <el-descriptions-item>
                                <template slot="label">
                                    创建时间
                                </template>
                                <span>{{ dateFormat2(props.row.CreateTime) }}</span>
                            </el-descriptions-item>

                            <el-descriptions-item>
                                <template slot="label">
                                    创建人
                                </template>
                                <span>{{ props.row.CreateBy }}</span>
                            </el-descriptions-item>

                            <el-descriptions-item>
                                <template slot="label">
                                    修改时间
                                </template>
                                <span>{{ dateFormat2(props.row.ModifyTime) }}</span>
                            </el-descriptions-item>

                            <el-descriptions-item>
                                <template slot="label">
                                    修改人
                                </template>
                                <span>{{ props.row.ModifyBy }}</span>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-form>
                </template>
            </el-table-column>

            <el-table-column prop="CusomerName" label="网站名称" show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="Domain" label="网站域名" width="180" show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="VersionStr" label="系统版本" align="center" width="100" show-overflow-tooltip="true"></el-table-column>

            <el-table-column prop="FtpStr" label="FTP地址" width="200" show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="FtpUserName" label="FTP账号" width="150"></el-table-column>
            <el-table-column prop="FtpPassword" label="FTP密码" width="150"></el-table-column>

            <el-table-column prop="DatabaseStr" label="数据库地址" width="200" show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="DatabaseName" label="数据库名称" width="150"></el-table-column>
            <el-table-column prop="DatabaseUser" label="数据库账号" width="150"></el-table-column>
            <el-table-column prop="DatabasePwd" label="数据库密码" width="150"></el-table-column>

            <el-table-column fixed="right" label="操作" align="center" width="150">
                <template slot-scope="scope">
                    <el-button type="text" id="btn-edit" size="small" @@click="handleEdit(scope.row.Id)">编辑</el-button>
                    <el-button type="text" id="btn-view" size="small" @@click="handleView(scope.row.Id)">查看</el-button>
                    <el-button type="text" id="btn-copy" size="small" @@click="handleCopy(scope.row)">复制</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination background layout="total, prev, pager, next" :total="page.total" :page-size="page.pageSize" @@current-change="handleCurrentChange" class="pageview"></el-pagination>

        <el-dialog title="主机编辑" top="40px" :visible.sync="visible.form" width="60%" :destroy-on-close="true" :close-on-click-modal="true" :close-on-press-escape="false">
            <div class="form-view">
                <el-form :model="form" :rules="rules" ref="form" label-width="100px" :disabled="disabled">

                    <el-col :span="24">
                        <el-divider content-position="left">网站信息</el-divider>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="客户名称" prop="CusomerName">
                            <el-input v-model="form.CusomerName" placeholder="请输入客户名称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="网站域名" prop="Domain">
                            <el-input v-model="form.Domain" placeholder="请输入网站域名" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="测试域名" prop="TestDomain">
                            <el-input v-model="form.TestDomain" placeholder="请输入测试域名" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="域名平台" prop="DomainType">
                            <el-select v-model="form.DomainType" placeholder="请选择域名平台" clearable>
                                <el-option :key="0" label="暂无设置" :value="0"></el-option>
                                <el-option :key="1" label="阿里云" :value="1"></el-option>
                                <el-option :key="2" label="西部数码" :value="2"></el-option>
                                <el-option :key="3" label="美橙互联" :value="3"></el-option>
                                <el-option :key="3" label="新网" :value="4"></el-option>
                                <el-option :key="4" label="客户私有" :value="5"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="系统版本" prop="Version">
                            <el-select v-model="form.Version" placeholder="请选择系统版本" clearable>
                                <el-option :key="0" label="暂无设置" :value="0"></el-option>
                                <el-option :key="1" label="V1.0" :value="1"></el-option>
                                <el-option :key="2" label="V2.0" :value="2"></el-option>
                                <el-option :key="3" label="V2.4" :value="3"></el-option>
                                <el-option :key="4" label="V3.0" :value="4"></el-option>
                                <el-option :key="5" label="V3.1" :value="5"></el-option>
                                <el-option :key="6" label="V3.2" :value="6"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item>&nbsp;</el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-divider content-position="left">主机信息</el-divider>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="主机供应商" prop="Supplier">
                            <el-select v-model="form.Supplier" placeholder="请选择主机供应商" clearable>
                                <el-option :key="0" label="暂无设置" :value="0"></el-option>
                                <el-option :key="1" label="阿里云" :value="1"></el-option>
                                <el-option :key="2" label="西部数码" :value="2"></el-option>
                                <el-option :key="3" label="美橙互联" :value="3"></el-option>
                                <el-option :key="4" label="客户私有" :value="4"></el-option>
                                <el-option :key="4" label="其它" :value="5"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="主机类型" prop="HostType">
                            <el-select v-model="form.HostType" placeholder="请选择主机供应商" clearable>
                                <el-option :key="0" label="暂无设置" :value="0"></el-option>
                                <el-option :key="1" label="备案虚拟主机" :value="1"></el-option>
                                <el-option :key="2" label="免备案虚拟主机" :value="2"></el-option>
                                <el-option :key="3" label="云服务器" :value="3"></el-option>
                                <el-option :key="4" label="客户私有" :value="4"></el-option>
                                <el-option :key="4" label="其它" :value="5"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item>&nbsp;</el-form-item>
                    </el-col>


                    <el-col :span="8">
                        <el-form-item label="FTP地址" prop="FtpStr">
                            <el-input v-model="form.FtpStr" placeholder="请输入FTP地址" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="FTP账号" prop="FtpUserName">
                            <el-input v-model="form.FtpUserName" placeholder="请输入FTP账号" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="FTP密码" prop="FtpPassword">
                            <el-input v-model="form.FtpPassword" placeholder="请输入FTP密码" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-divider content-position="left">数据库信息</el-divider>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="数据库类型" prop="Version">
                            <el-select v-model="form.DataBaseType" placeholder="请选择系统版本" clearable>
                                <el-option :key="0" label="暂无设置" :value="0"></el-option>
                                <el-option :key="1" label="SQLServer" :value="1"></el-option>
                                <el-option :key="2" label="MySQL" :value="2"></el-option>
                                <el-option :key="3" label="Oracle" :value="3"></el-option>
                                <el-option :key="4" label="SQLite" :value="4"></el-option>
                                <el-option :key="5" label="Access" :value="5"></el-option>
                                <el-option :key="6" label="MariaDB" :value="6"></el-option>
                                <el-option :key="7" label="MangoDB" :value="7"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="16">
                        <el-form-item label="数据库地址" prop="DatabaseStr">
                            <el-input v-model="form.DatabaseStr" placeholder="请输入数据库地址" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="数据库名称" prop="DatabaseName">
                            <el-input v-model="form.DatabaseName" placeholder="请输入数据库名称" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="数据库账号" prop="DatabaseUser">
                            <el-input v-model="form.DatabaseUser" placeholder="请输入数据库账号" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="数据库密码" prop="DatabasePwd">
                            <el-input v-model="form.DatabasePwd" placeholder="请输入数据库密码" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-divider content-position="left">签约信息</el-divider>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="签约商务" prop="SignUser">
                            <el-input v-model="form.SignUser" placeholder="请输入签约商务" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="签约时间" prop="SignTime">
                            <el-date-picker v-model="form.SignTime" align="right" type="date" placeholder="请选择签约时间" clearable></el-date-picker>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="签约年限" prop="SignYear">
                            <el-input-number v-model="form.SignYear" :min="0" controls-position="right" placeholder="请设置签约年限" clearable></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注" prop="Remark">
                            <el-input type="textarea" v-model="form.Remark" :rows="3" placeholder="请输入备注信息"></el-input>
                        </el-form-item>
                    </el-col>
                </el-form>
            </div>
            <span slot="footer" v-if="!disabled">
                <el-button @@click="visible.form = false">取 消</el-button>
                <el-button type="primary" :loading="loading.save"  @@click="handleSave('form')">保 存</el-button>
            </span>
        </el-dialog>
        
        <el-dialog title="修改密码" top="120px" :visible.sync="visible.pwd" width="420px" :destroy-on-close="true" :close-on-click-modal="true" :close-on-press-escape="false">
            <div class="form-view" style="height: auto;">
                <el-form :model="changePwd" :rules="rules" ref="changePwd" label-width="100px">
                    <el-form-item label="原密码" prop="oldPwd">
                        <el-input v-model="changePwd.oldPwd" placeholder="请输入原密码" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="newPwd">
                        <el-input v-model="changePwd.newPwd" placeholder="请输入新密码" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="确认新密码" prop="confirmPwd">
                        <el-input v-model="changePwd.confirmPwd" placeholder="请确认新密码" clearable></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" v-if="!disabled">
                <el-button @@click="visible.pwd = false">取 消</el-button>
                <el-button type="primary" :loading="loading.pwd" @@click="changePassword('changePwd')">保 存</el-button>
            </span>
        </el-dialog>
    </el-main>
</el-container>

@section Scripts {
    <script src="~/Content/js/app.js"></script>
}